<template>
	<div style="width: 500px;margin: 0 auto;">
		<h1 style="text-align: center;">注册</h1>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="ruleForm.username"></el-input>
		  </el-form-item>
		  <el-form-item label="密码" prop="password">
		    <el-input v-model="ruleForm.password" type="password"></el-input>
		  </el-form-item>
		  <el-form-item label="确认密码" prop="password">
		    <el-input v-model="ruleForm.password2" type="password"></el-input>
		  </el-form-item>
		  <el-form-item label="性别" prop="sex">
		      <el-radio v-model="ruleForm.sex" label="f">女</el-radio>
		      <el-radio v-model="ruleForm.sex" label="m">男</el-radio>
		  </el-form-item>
		  <el-form-item label="爱好" prop="hobby">
		      <el-checkbox v-model="ruleForm.hobby" label="wzry">王者荣耀</el-checkbox>
		      <el-checkbox v-model="ruleForm.hobby" label="cj">吃鸡</el-checkbox>
		      <el-checkbox v-model="ruleForm.hobby" label="dy">抖音</el-checkbox>
		  </el-form-item>
		  <el-form-item label="籍贯" prop="native">
		      <el-select v-model="ruleForm.native" placeholder="请选择">
		          <el-option
		            v-for="item in natives"
		            :key="item.value"
		            :label="item.label"
		            :value="item.value">
		          </el-option>
		        </el-select>
		  </el-form-item>
		  <el-form-item label="个人介绍" prop="descrip">
		    <el-input v-model="ruleForm.descrip" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
		    <el-button @click="reg">登录</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
			natives:[
				{
					label:"北京",
					value:"bj",
				},
				{
					label:"黑龙江",
					value:"hlj",
				},
				{
					label:"吉林省",
					value:"jl",
				}
			],
	        ruleForm: {
	          username: '',
	          password: '',
			  password2:"",
			  sex:'',
			  hobby:[],
			  native:'',
			  descrip:'',
	        },
	        rules: {
	          username: [
	            { required: true, message: '请输入用户名', trigger: 'blur' },
	            { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
	          ],
	          password: [
	            { required: true, message: '请输入密码', trigger: 'blur' },
	            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
	          ],
	          sex: [
	            { required: true, message: '请选择性别', trigger: 'blur' },
	          ],
	          hobby: [
	            { required: true, message: '请选择爱好', trigger: 'blur' },
	          ],
	          native: [
	            { required: true, message: '请选择籍贯', trigger: 'blur' },
	          ],
			  descrip:[
				  {max: 150, message: '字数最多不要超过150个字', trigger: 'blur' }
			  ]
	        }
	      };
	    },
	    methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) { // 判断校验是否通过，true表示通过
	            alert('校验通过，应该发送ajax进行登录!');
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      reg() {
	        this.$router.push("/login")
	      }
	    }
	  }
</script>

<style>
</style>